<?php if (!defined('THINK_PATH')) exit(); /*a:3:{s:67:"C:\wwwroot\xtgl\public/../application/admin\view\sysuser\index.html";i:1670148044;s:57:"C:\wwwroot\xtgl\application\admin\view\public\header.html";i:1672305798;s:57:"C:\wwwroot\xtgl\application\admin\view\public\footer.html";i:1670148044;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo config('WEB_SITE_TITLE'); ?></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/admin/js/layui/css/layui.css" >
    <link rel="stylesheet" href="/static/admin/layAdmin/css/admin.css" >
    <script src="/static/admin/js/jquery.js"></script>
    <script src="/static/admin/js/jquery.form.js"></script>
    <script src="/static/admin/js/jmzhfsform.js"></script>
    <script src="/static/admin/js/layui/layui.js"></script>
    <script src="/static/admin/js/jmzhclass.js?v=1.222"></script>
    <link href="/static/admin/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/static/admin/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/admin/umeditor/umeditor.min.js"></script>

    <link href="/static/admin/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <link href="/static/admin/js/layui_exts/webupload/uploader/style.css" type="text/css" rel="stylesheet">
    <link href="/static/admin/js/layui_exts/webupload/uploader/webuploader.css" type="text/css" rel="stylesheet">

    <script src="/static/admin/js/tableExport.js"></script>

    <link href="/static/admin/js/plugins/wx-audio/wx-audio.css" type="text/css" rel="stylesheet">

    <!--<script src="/static/admin/js/layui/layui.all.js"></script>-->
    <!--&lt;!&ndash;<link rel="stylesheet" href="/static/admin/layAdmin/css/font-awesome.min.css">&lt;!&ndash;fontAwesome图标库&ndash;&gt;&ndash;&gt;-->

</head>
<body>
<div class="layui-fluid">
    <div class="layui-card" >


        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-userfront-formlist">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>

                    <div class="layui-input-block">
                        <input class="layui-input" name="username" id="username" autocomplete="off">
                    </div>

                </div>

                <a class="layui-btn" data-type="reload" id="reload">搜索</a>
                <a class="layui-btn layuiadmin-btn-admin layui-btn-normal" data-type="add" >添加</a>
            </div>

        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">

            </div>
        </script>

        <script type="text/html" id="operation">

            {{#  if(d.rolename == '超级管理员'){ }}
                <a class=""><input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="startDemo" {{ d.status == 0 ? 'checked' : '' }}></a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" >删除</a>
            {{#  } else { }}
                <a class=""><input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="startDemo" {{ d.status == 0 ? 'checked' : '' }}></a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs "lay-event="del" >删除</a>
            {{#  } }}



        </script>
        <script type="text/html" id="switchTpl">
            <!--<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="停用|启用" lay-filter="startDemo" {{ d.stopstart == 1 ? 'checked' : '' }}>-->
        </script>
        <table class="layui-table" id="tableEvent" lay-data=""  lay-filter="tableEvent">

        </table>

    </div>



</div>



<form class="layui-form" action="" id="myform" lay-filter="example" style="display: none">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="required|username" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item" id="oldMima">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" id="password" lay-verify="password" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="display: none" id="newMima">
        <div class="layui-inline">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="text" name="newpassword" lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" id="status" lay-verify="required">
                    <option value="1" >禁用</option>
                    <option value="0" >启用</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="roleid" id="roleid" lay-verify="required">

                </select>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" value="" class="layui-input">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="savedata">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary"  onclick="layer.closeAll()">取消</button>
        </div>
    </div>
</form>
    <div id="headCrop" style="display:none">
    <div class="tailoring-content-one">
        <label title="选择图片" for="chooseImg" class="layui-btn">
            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"><i class="fa fa-cloud-upload"></i>
            选择图片
        </label>
    </div>
    <div class="ibox-content">
        <div class="tailoring-content">
            <div class="tailoring-content-two">
                <div class="tailoring-box-parcel" style="text-align: center">
                    <img id="tailoringImg">
                    <span class="word" style="position:relative;top:50%;font-size:14px;color: #c2c2c2">仅支持JPG、JPEG、PNG格式的图片文件</span><br>
                    <!--<span class="size" style="position:relative;top:50%;font-size:16px">文件不能大于2MB</span>-->
                </div>
                <div class="preview-box-parcel">
                    <!--<p>图片预览：</p>-->
                    <div class="square previewImg"></div>
                    <div class="circular previewImg"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <span class="layui-btn cropper-reset-btn" style="float:left">复位</span>
        <span class="layui-btn zoomIn" style="float:left">放大</span>
        <span class="layui-btn zoomOut" style="float:left">缩小</span>
        <span class="layui-btn cropper-rotate-btn" style="float:left">旋转</span>
        <span class="layui-btn cropper-scaleX-btn" style="float:left">换向</span>
        <span class="layui-btn " id="sureCut"><i class="fa fa-save"></i> 保存</span>
        <span class="layui-btn layui-btn-primary" onclick="layer.closeAll()"><i class="fa fa-close"></i> 关闭</span>
    </div>
</div>


<script src="/static/admin/js/plugins/wx-audio/wx-audio.js" ></script><!--音频播放器组件-->

<script src="/static/admin/js/layui_exts/webupload/uploader/webuploader.js"></script>

<script src="/static/admin/layAdmin/js/Icon.js"></script><!--fontAwesome图标库-->
<script src="/static/admin/layAdmin/js/wk.js"></script><!--封装方法-->


<script>
    layui.config({
        base: '/static/admin/layAdmin/src/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
        ,formSelects: 'formSelects-v4'
    }).use(['index','formSelects']),function(){
        var formSelects = layui.formSelects
    };
</script>
<script>


    //关闭自动填充
    $('input').attr('autocomplete',"off");

    // //图片灯箱
    // function imgDisplay(obj) {
    //     var src = $(obj).attr("src");
    //     var imgHtml = '<div class="showP"><img src=' + src + ' style="margin-top: 120px;height:50%;margin-bottom:120px;"  /><p class="closeP"  onclick="closePicture(this)"><span class="cha">×</span></p></div>'
    //     $('body').append(imgHtml);
    // }
    //
    // //关闭图片灯箱
    // function closePicture(obj) {
    //     $(obj).parent("div").remove();
    // }

    //tips框
    $('#offAll').on('mouseover', function(){
        var that = this;
        layer.tips('<span style="color:#686B6D;"><i class="fa fa-info-circle"></i> 若未勾选默认禁用全部</span>', that,{tips: [2, '#F2F2F2'],time: 10000});
    });
    //tips框
    $('#onAll').on('mouseover', function(){
        var that = this;
        layer.tips('<span style="color:#686B6D;"><i class="fa fa-info-circle"></i> 若未勾选默认启用全部</span>', that,{tips: [2, '#F2F2F2',''],time: 10000});
    });
    //tips框
    $('#excel').on('mouseover', function(){
        var that = this;
        layer.tips('<span style="color:#686B6D;"><i class="fa fa-info-circle"></i> 导出筛选完成数据</span>', that,{tips: [2, '#F2F2F2',''],time: 10000});
    });
    //关闭tips框
    $('#offAll,#onAll,#export,#excel').on('mouseout', function(){
        layer.closeAll('tips');
    });

    //layui公共操作
    layui.use(['form','table'], function() {
        var form = layui.form
            ,table = layui.table
        //重置搜索框
        $('#empty').on('click', function () {
            $('.layui-input').val('');
            // $(".search").trigger("chosen:updated");
            $('select').each(function (i, j) {
                $(j).find("option:selected").attr("selected", false);
                form.render('select')
            })
        });
        //表格排序
        table.on('sort(LAY-table-manage)', function(obj){
            table.reload('LAY-table', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态
                ,where: { //请求参数
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });
        //监听搜索
        form.on('submit(LAY-search)', function (data) {
            //执行重载
            table.reload('LAY-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: data.field
            });
        });

    });
</script>
<script>
    layui.use(['laydate','table','form', 'layer','element', 'jquery','admin','view'], function(){
        var $ = layui.$
            ,table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate
            ,admin = layui.element
            ,view = layui.view
            ,element = layui.element;

        form.render();

        getRole(form);//获取角色列表

        var username =$("#username").val();
        table.render({
            elem: '#tableEvent'
            ,url: "<?php echo url('Sysuser/ajaxGetSysuser'); ?>" //数据接口,
            ,page: true
            ,where:{username:username}    //向后台传递参数
            //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,parseData: function(res){ //res 即为原始返回的数据
                return res;

            },cols: [[ //表头
                {align:'center',field: 'id', title: '序号'}
                ,{align:'center',field: 'username', title: '用户名'}
                ,{align:'center',field: 'rolename', title: '角色'}
//                ,{field:'stopstart', title:'状态', width:85, templet: '#operation', unresize: true}
                ,{align:'center',fixed: 'right', title:'操作',toolbar: '#operation',unresize: true}
            ]]
            ,id: 'testReload'
            ,done: function(res, curr, count){
                //merge2(res);
            }
        });
        //监听状态操作
        form.on('switch(startDemo)', function(obj){

            if(obj.elem.checked){
                layer.tips('启用', obj.othis);
                var data = {id:this.value,status:0,type:'edit2'}
            }else{
                layer.tips('停用', obj.othis);
                var data = {id:this.value,status:1,type:'edit2'}
            }
            ajaxSavedata(data,table,'status')
        });
        //监听行工具事件
        table.on('tool(tableEvent)', function(obj){

            if(obj.event === 'del'){
                var msg = "真要删除用户（"+obj.data.username+"）吗？";
                layer.confirm(msg, function(index){
                    var id = obj.data.id
                    var updata = {id:id,type:obj.event}
                    ajaxSavedata(updata,table);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                openForm('编辑',form,obj.event,obj.data);
            }

        });

        $('#reload').on('click', function(){
            var username =$("#username").val();

            table.reload('testReload', {
                where: { //设定异步数据接口的额外参数，任意设
                    username: username
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        });


        //头工具栏事件
        table.on('toolbar(tableEvent)', function(obj){

            openForm('添加',form,'add','');

        });

        //监听提交
        form.on('submit(savedata)', function(data){

            if(data.field.id){
                data.field.id=data.field.id
                data.field.type='edit'
                ajaxSavedata(data.field,table,'edit');
            }else {
                data.field.type='add'
                ajaxSavedata(data.field,table,'add');
            }

            return false;
        });

        //事件
        var active = {
            add: function(){
                openForm('添加',form,'add','');
            }
        }

        $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function openForm(title,form,type,data) {

        $("#reset").click();//重置表单
        if(type =='edit'){

            $('#newMima').show();
            $('#oldMima').hide();
        }
        if(type =='add'){
            $("#status").val('0')
            $('#newMima').hide();
            $('#oldMima').show();
        }
        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: title,
            area: ['370px', '400px'],
            shadeClose: true,
            content: $("#myform"),//$("#myform")引用的弹出层的页面层的方式加载修改界面表单
            success: function (layero) {
                if(type =='add'){
                    form.val('example', {
                        "status": 0     //在这里绑定值，是因为下拉框name=‘status’ 使用这个关键词，没有自动选定，也可以更换name的名称
                    });
                }else{
                    form.val('example', {
                        "id":data.id
                        ,"username": data.username
                        ,"roleid": data.roleid
                        ,"status": data.status
                        //,"password":data.password
                    });
                }

                form.render();

                var mask = $(".layui-layer-shade");
                mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象
            }
        });
    }
    function getRole(form) {
        $.ajax({
            url: "<?php echo url('Sysuser/ajaxGetSysRole'); ?>",
            data: '',
            success: function (e) {
                if(e.data){
                    var data = e.data
                    var str = "<option value=''>请选择</option>";
                    for (var k in data) {
                        str += "<option value='" + data[k].id + "'>" + data[k].rolename + "</option>";
                    }
                    $("#roleid").html(str);
                }

                form.render();
            }
        });
    }

    function ajaxSavedata(data,table,type='') {

        $.ajax({
            url: "<?php echo url('Sysuser/ajaxSaveSysuser'); ?>",
            data: data,
            success: function (e) {
                if(e.code==1){
                    layer.close(layer.index);
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                    layer.msg(e.msg)
                }else{
                    layer.msg(e.msg)
                }

            }

        });

    }

</script>
</body>
</html>
